<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>作品</title>
  <!-- 库文件引用 -->
  <link rel="stylesheet" href="/common/css/swiper-3.4.2.min.css">
  <link rel="stylesheet" href="/common/layui/css/layui.css">
  <link rel="stylesheet" href="/common/css/animate.min.css">
  
  <link rel="stylesheet" href="/common/css/index.css">
</head>
<body>
  <!-- 顶部导航 -->
  <div id="header"></div>
  <div id="body" class="opusbox boxBox">
    <div class="swiper-wrapper">
      <div class="swiper-slide" data-name="item.name" v-for="(item, index) in opusMenuList" :key="index">
        <!-- 第一层 CG动画-->
        <div class="CGanimationBox CGanimationBox_O" v-if="item.id == '0'"> 
          <div class="CGanimation">
            <div class="swiper-wrapper">
              <div class="swiper-slide" :data-link="item.videoLink" v-for="(item, index) in CGanimationList" :key="index"> 
                <div class="shadowMask">
                  <img class="button" src="/images/playButton.png" alt="">
                  <div class="showMsg">
                    <img class="cgtitle" src="/images/opus_o02.png" alt="">
                    <div>动画/电影/番剧</div>
                  </div>
                </div>
                <img class="imgbg"  :src="item.imgUrl" alt="">
              </div>
            </div> 
          </div> 
          <div class="small_CGanimation">
            <div class="swiper-wrapper">
              <div class="swiper-slide" :data-current="index" v-for="(item, index) in CGanimationList" :key="index">
                <div class="shadowMask" v-if="index!=CGanimationIndex"></div>
                <div v-else class="showMsg">
                  {{item.name}}
                </div>
                <img class="img" :src="item.imgUrl" alt="">
              </div>
            </div>
          </div> 
        </div>
        <!-- 第二层 买量视频-->
        <div class="CGanimationBox CGanimationBox_T" v-if="item.id == '1'"> 
          <div class="CGanimation">
            <div class="swiper-wrapper">
              <div class="swiper-slide" :data-link="item.videoLink" v-for="(item, index) in buyVideoList" :key="index">
                <div class="shadowMask">
                  <img class="button" src="/images/playButton.png" alt="">
                  <div class="showMsg">
                    <img class="cgtitle" src="/images/video_02.png" alt="">
                    <div>2D买量动画/3D 买量动画</div>
                  </div>
                </div>
                <img class="imgbg"  :src="item.imgUrl" alt="">
              </div>
            </div> 
          </div> 
          <div class="small_CGanimation">
            <div class="swiper-wrapper">
              <div class="swiper-slide" :data-current="index" v-for="(item, index) in buyVideoList" :key="index">
                <div class="shadowMask" v-if="index!=buyVideoIndex"></div>
                <div v-else class="showMsg">
                  {{item.name}}
                </div>
                <img class="img" :src="item.imgUrl" alt="">
              </div>
            </div>
          </div> 
        </div>
        <!-- 第三层 2D美术 -->
        <div id="tDartBox" class="tDartBox" v-if="item.id == '2'">
          <div id="tDartBoxul" class="swiper-container tDartBoxul">
            <div class="swiper-wrapper">
              <div class="swiper-slide animate__animated" data-name="animate__zoomOut" v-for="(item, index) in artimgList" :key="index">
                <img class="img" :layer-src="item.imgUrl"  :src="item.imgUrl" alt="">
                <div class="shadowMask"></div>
              </div>
            </div>
          </div>
          <div class="showMsg">
            <img class="imgIcon" src="/images/twoart.png" alt=""> 
            <div class="text">角色/场景/概念/美宣{{artimgList.length}}</div>
          </div>
        </div>
        <!-- 第四层 3d美术 -->
        <div id="threeDartBox" class="threeDartBox" v-if="item.id == '3'">
          <!-- <ul id="threeDartBoxul">
            <li class="animate__animated" data-name="animate__zoomOut" v-for="(item, index) in threeArtimgList" :key="index">
              <img class="img" :layer-src="item.imgUrl"  :src="item.imgUrl" alt="">
              <div class="shadowMask"></div>
            </li>
          </ul> -->
          <div id="threeDartBoxul" class="swiper-container threeDartBoxul">
            <div class="swiper-wrapper">
              <div class="swiper-slide animate__animated" data-name="animate__zoomOut" v-for="(item, index) in artimgList" :key="index">
                <img class="img" :layer-src="item.imgUrl"  :src="item.imgUrl" alt="">
                <div class="shadowMask"></div>
              </div>
            </div>
          </div>
          <div class="showMsg">
            <img class="imgIcon" src="/images/threeArt.png" alt="">
            <div class="text">角色/场景/美宣</div>
          </div>
        </div>
        <!-- 第五层 音乐 -->
        <div class="audioBox" v-if="item.id == '4'">
          <div class="audio_swiper swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide" :data-link="item.link" v-for="(item, index) in audioList" :key="index">
                <img class="img" :src="item.imgUrl" alt="">
                <img class="button" src="/images/playButton.png">
                <div class="autioMsg">
                  <div class="title">《守望》配乐</div>
                  <div class="content">
                    CG动画《守望》又名《Watch over》出自xxx作品，2021年上映与xxx，获得xxx奖项与xxx。
                  </div>
                </div>
                <div class="shadowMask"></div>
              </div>
            </div>
            <div class="swiper-button-prev swiper-button-white"></div>
            <div class="swiper-button-next swiper-button-white"></div>
          </div>
          <div class="showMsg">
            <img class="titleimg" src="/images/audio3.png" />
            <div class="text">编曲/混音/游戏、CG音效</div>
          </div>
        </div>
        <!-- swiper切换箭头 -->
        <div class="swiperPrev" :data-type="index+1<opusMenuList.length">
          <img v-if="index+1<opusMenuList.length"  class="img animate__animated animate__infinite animate__fadeInDown" src="/images/nextPrev.png" alt="">
          <img v-else  class="img animate__animated animate__infinite animate__fadeInUp" src="/images/nextPrev_02.png" alt="">
        </div>
      </div>
    </div>
    <div class="swiper-pagination_opus"></div>
    <div class="board"></div>
  </div>
   
  <!-- 视频通用 -->
  <div  class="layVideo">
    <video id="layVideo" :src="layVideolink" autoplay controls></video>
  </div>
  <!-- 音频通用 -->
  <div class="layAudio layVideo">
    <audio id="layAudio" :src="layAudioLink" autoplay controls></audio>
  </div>
</body>
</html>

<script type="text/javascript"  src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript"  src="/common/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript"  src="/common/js/swiper-3.4.2.min.js"></script>
<script type="text/javascript"  src="/common/layui/layui.js"></script>
<script type="text/javascript"  src="/common/js/clipboard.min.js"></script>
<script type="text/javascript"  type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
<script src="/common/js/index.js"></script>
<script>
  $(document).ready(function(){
    $("#header").load("./library/header.html");
    $("#footer").load("./library/footer.html");
  });
</script>